<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/11/22
  Time: 12:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="admin_header.jsp"%>
<%@ include file="admin_sidebar.jsp"%>

<div class="content">
    <div style="margin-top: 10px;font-weight: 600;">小说审核记录(总共 ${reviewCount} 条)</div>
    <form action="#" method="post" class="navbar-form navbar-left" role="search" style="padding: 0;margin-bottom: 0">
        <div class="form-group">
            <input type="text" class="form-control" name="keyword" placeholder="书名或者作者" style="width: 500px">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
<%--        <button type="button" class="button-1"><a href="#">添加小说</a></button>--%>
    </form>
    <div class="table-container">
        <table class="table"> <!-- 注意这里的类名是 "table" 而不是 "table-container" -->
            <thead>
            <tr>
                <th>NO</th>
                <th>User_ID</th>
                <th>小说名</th>
                <th>作者</th>
                <th>简介</th>
                <th>图片URL</th>
                <th>类型</th>
                <th>小说状态</th>
                <th>上传时间</th>
                <th>点击量</th>
                <th>审核状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 使用JSP的c:forEach循环来动态生成表格行 -->
            <c:forEach var="review" items="${reviewList}" varStatus="status">
                <tr>
                    <!-- 使用 varStatus.index 来获取当前行的索引（从0开始） -->
                    <!-- 使用 varStatus.count 来获取当前行的计数（从1开始） -->
                    <td>${(reviewPage-1) * 10 + status.count}</td>
                    <td>${review.user_id}</td>
                    <td>${review.title}</td>
                    <td>${review.author}</td>
                    <td>${review.description}</td>
                    <td>${review.cover_image_url}</td>
                    <td>${review.category}</td>
                    <td>${review.statu_s}</td>
                    <td>${review.update_time}</td>
                    <td>${review.click_count}</td>
                    <td>
                        <c:choose>
                            <c:when test="${review.status_admin == 0}">
                                <span class="label label-warning" style="background-color: #c6c4c1">未审核</span>
                            </c:when>
                            <c:when test="${review.status_admin == 1}">
                                <span class="label label-success">已通过</span>
                            </c:when>
                            <c:otherwise>
                                <span class="label label-danger">拒绝</span>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td style="position: relative;">
                        <div class="button_admin_status" data-review-id="${review.id}">
                            <button class="toggle-dropdown" type="button" style="background-color: white;border: none">
                                <i class="status-icon fa-solid fa-spinner"></i>
                            </button>
                            <div class="dropdown-menu-admin">
                                <div data-status="1" class="dropdown-item-admin">
                                    <i class="fa-solid fa-square-check" style="color: #63E6BE;"></i>
                                </div>
                                <div data-status="3" class="dropdown-item-admin">
                                    <i class="fa-solid fa-square-xmark" style="color: #ef9797;"></i>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <div class="page-information">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <c:if test="${reviewPage > 1}">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </c:if>
                </li>
                <c:forEach var="pageNum" begin="1" end="${reviewPageCount}">
                    <li><a href="#" class="page-link">${pageNum}</a></li>
                </c:forEach>
                <li>
                    <c:if test="${reviewPage < reviewPageCount}">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </c:if>
                </li>
            </ul>
        </nav>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 获取所有状态切换按钮
        document.querySelectorAll('.button_admin_status').forEach(function(buttonContainer) {
            const toggleButton = buttonContainer.querySelector('.toggle-dropdown');
            const dropdownMenu = buttonContainer.querySelector('.dropdown-menu-admin');
            const statusIcon = buttonContainer.querySelector('.status-icon');
            const statusCell = buttonContainer.closest('tr').querySelector('td:nth-last-child(2)');
            const reviewId = buttonContainer.dataset.reviewId;  // 获取数据属性

            // 获取初始状态并设置正确的图标
            function setInitialIcon() {
                const statusLabel = statusCell.querySelector('.label');
                let iconClass, iconColor;

                if (statusLabel.classList.contains('label-success')) {
                    // 状态为已通过(1)
                    iconClass = 'fa-square-check';
                    iconColor = '#63E6BE';
                } else if (statusLabel.classList.contains('label-warning')) {
                    // 状态为未审核(0)
                    iconClass = 'fa-spinner';
                    iconColor = '#c6c4c1';
                } else {
                    // 状态为拒绝(3或其他)
                    iconClass = 'fa-square-xmark';
                    iconColor = '#ef9797';
                }

                statusIcon.className = 'status-icon fa-solid ' + iconClass;
                statusIcon.style.color = iconColor;
            }

            // 初始化时设置正确的图标
            setInitialIcon();

            // 检查初始状态并禁用按钮的函数
            function checkAndDisableButton() {
                const statusLabel = statusCell.querySelector('.label');
                if (statusLabel.classList.contains('label-warning')) {
                    return;
                }
                toggleButton.disabled = true;
                toggleButton.style.cursor = 'not-allowed';
                dropdownMenu.remove();
            }
            // 初始化时检查状态
            checkAndDisableButton();

        // 更新状态显示的函数
        function updateStatusDisplay(status) {
            let labelClass, labelText, iconClass, iconColor;

            if (status === '1') {
                labelClass = 'label-success';
                labelText = '已通过';
                iconClass = 'fa-square-check';
                iconColor = '#63E6BE';
            } else if (status === '0') {
                labelClass = 'label-warning';
                labelText = '未审核';
                iconClass = 'fa-spinner';
                iconColor = '#c6c4c1';
            } else {
                labelClass = 'label-danger';
                labelText = '拒绝';
                iconClass = 'fa-square-xmark';
                iconColor = '#ef9797';
            }

            // 构建 HTML 字符串
            let styleAttr = labelClass === 'label-warning' ? ' style="background-color: #c6c4c1"' : '';
            let htmlString = '<span class="label ' + labelClass + '"' + styleAttr + '>' + labelText + '</span>';

            // 更新状态显示
            statusCell.innerHTML = htmlString;

            // 更新图标
            statusIcon.className = 'fa-solid ' + iconClass;
            statusIcon.style.color = iconColor;
        }

            toggleButton.addEventListener('click', function (event) {
                event.stopPropagation();
                // 关闭其他所有下拉菜单
                document.querySelectorAll('.dropdown-menu-admin.show-admin').forEach(menu => {
                    if (menu !== dropdownMenu) {
                        menu.classList.remove('show-admin');
                    }
                });
                dropdownMenu.classList.toggle('show-admin');

                if (dropdownMenu.classList.contains('show-admin')) {
                    const buttonRect = this.getBoundingClientRect();
                    dropdownMenu.style.top = (buttonRect.bottom + window.scrollY) + 'px';
                    dropdownMenu.style.left = (buttonRect.left + window.scrollX) + 'px';
                }
            });

            dropdownMenu.addEventListener('click', function (event) {
                const dropdownItem = event.target.closest('.dropdown-item-admin');
                if (dropdownItem) {
                    const status = dropdownItem.getAttribute('data-status');

                    $.ajax({
                        url: 'ReviewUpdateStatuServlet',
                        method: 'POST',
                        data: {
                            status_admin: status,
                            reviewId: reviewId  // 添加 reviewId 参数
                        },
                        success: function(response) {
                            if (response==='success') {
                                // 更新状态显示
                                updateStatusDisplay(status);
                                dropdownMenu.classList.remove('show-admin');
                                toggleButton.disabled = true;
                                toggleButton.style.cursor = 'not-allowed';
                                dropdownMenu.remove();
                                alert("状态更新成功！,拒绝上传小说！");
                            } else if(response==='novelSuccess'){
                                updateStatusDisplay(status);
                                dropdownMenu.classList.remove('show-admin');
                                toggleButton.disabled = true;
                                toggleButton.style.cursor = 'not-allowed';
                                dropdownMenu.remove();
                                alert("状态更新成功，已上传小说！");
                            } else if(response==='novelFailure'){
                                updateStatusDisplay(3);
                                dropdownMenu.classList.remove('show-admin');
                                toggleButton.disabled = true;
                                toggleButton.style.cursor = 'not-allowed';
                                dropdownMenu.remove();
                                alert("小说已存在！,拒绝上传！");
                            } else if(response==='novelMessageFail'){
                                updateStatusDisplay(status);
                                dropdownMenu.classList.remove('show-admin');
                                toggleButton.disabled = true;
                                toggleButton.style.cursor = 'not-allowed';
                                dropdownMenu.remove();
                                alert("状态更新成功，但小说添加数据库失败！！");
                            }
                            else{
                                alert('更新状态失败：' + response);
                            }
                        },
                        error: function(xhr, status, error) {
                            alert('请求失败：' + error);
                        }
                    });

                    event.stopPropagation();
                }
            });
        });

        // 点击页面其他地方关闭所有下拉菜单
        document.addEventListener('click', function () {
            document.querySelectorAll('.dropdown-menu-admin.show-admin').forEach(menu => {
                menu.classList.remove('show-admin');
            });
        });
    });
</script>
<%@ include file="admin_footer.jsp"%>